<template>
  <header class="flex justify-between items-center h-56px pl-25px pr-25px">
    <n-space class="left">
      <NuxtLink class="flex" to="/">
        <n-image
          preview-disabled
          class="w-32px h-32px"
          src="https://site.baiwumm.com/_vercel/image?url=%2Flogo.svg&w=1536&q=100"
        ></n-image>
      </NuxtLink>
      <BlurText
        text="Dream Site"
        :delay="200"
        class-name="font-semibold text-center text-21px font-bold"
        style="text-decoration: none"
        animate-by="words"
        direction="top"
        :threshold="0.1"
        root-margin="0px"
        :step-duration="0.35"
        @animation-complete="handleAnimationComplete"
      />
    </n-space>
    <n-space>
      <!-- <NuxtLink to="/table"> -->
        <n-image
          @click="toggle"
          preview-disabled
          class="w-20px h-20px"
          src="/img/MaterialSymbolsSunnyOutline.png"
        ></n-image>
      <!-- </NuxtLink> -->
      <NuxtLink
        target="_blank"
        to="https://gitee.com/jian-bin-zhao/nuxt-navagation"
      >
        <n-image
          preview-disabled
          class="w-20px h-20px"
          src="/img/MdiGithub.png"
        ></n-image>
      </NuxtLink>
      <template v-if="userStore.token">
        <n-space>
          {{ userStore.name }}
          <n-button size="small" type="primary" @click="handleLogout">注销</n-button>
        </n-space>
      </template>
      <template v-else>
        <NuxtLink to="/login">
          <n-image
            preview-disabled
            class="w-20px h-20px"
            src="/img/ClarityAvatarLine.png"
          ></n-image>
        </NuxtLink>
      </template>
    </n-space>
  </header>
</template>
<script setup>
import { useUserStore } from '@/store/user'
import { ref, defineProps } from "vue";
import BlurText from "@/pages/BlurText.vue";
import { lightTheme, darkTheme } from 'naive-ui';
import { color } from 'motion-v';
const theme = ref(false);
const isDark = ref(false);
const emit = defineEmits(["color"]);
const userStore = useUserStore()

const handleLogout = ()=>{
  userStore.clearUserInfo()
  navigateTo('/')
  alert('注销成功')
}

const toggle = () => {
  isDark.value = !isDark.value;
  emit('color', isDark.value ? darkTheme : lightTheme);
};


</script>

<style>
header {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}
</style>